---
import ArticleMockList from "../article/ArticleMockList.astro";
import CommonMockPage from "@components/common/CommonMockPage.astro";
---
    <div>
      <!-- tab头部开始 -->
      <div
        id="hot-category-box"
        class="bg-white shadow-sm shadow-gray-300/50 dark:bg-zinc-900 rounded-lg w-full"
      >
        <div
          class="max-w-screen-xl bg-white dark:bg-zinc-900 rounded-lg max-xl:w-screen flex flex-nowrap items-center overflow-hidden max-xl:overflow-auto justify-between mx-auto"
        >
          <ul
            class="flex max-w-3xl flex-nowrap text-sm font-medium text-center relative"
            id="index-tab-title-box"
            data-tabs-toggle="#index-tab-content"
            data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-gray-300 dark:hover:text-purple-500 border-orange-500 border-b-[3px] dark:border-rose-950"
            data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
            role="tablist"
          >
            <li class="me-2" role="presentation">
              <button
                class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                id="now-styled-tab"
                data-tabs-target="#styled-now"
                type="button"
                role="tab"
                aria-controls="now"
                aria-selected="false">最新</button
              >
            </li>
            <li class="me-2" role="presentation">
              <button
                class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                id="dashboard-styled-tab"
                data-tabs-target="#styled-dashboard"
                type="button"
                role="tab"
                aria-controls="dashboard"
                aria-selected="false">热门</button
              >
            </li>
            <li class="me-2" role="presentation">
              <button
                class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                id="settings-styled-tab"
                data-tabs-target="#styled-settings"
                type="button"
                role="tab"
                aria-controls="settings"
                aria-selected="false">开发</button
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- tab头部结束 -->
      <!-- tab主内容开始 -->
      <div id="hot-category-content" class="mt-2">
        <div
          class="p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
          id="styled-now"
          role="tabpanel"
          aria-labelledby="now-tab"
        >
          <div
            th:with="data=${@articleTag.pageArticles('nice',pageNum,100)},page='',pageId='styled-now'"
          >
            <ArticleMockList />
            <CommonMockPage />
          </div>
        </div>
        <div
          class="hidden p-1 rounded-lg dark:text-white font-semibold text-slate-900 bg-gray-50 dark:bg-gray-800"
          id="styled-dashboard"
          role="tabpanel"
          aria-labelledby="dashboard-tab"
        >
          <div
            class="group max-lg:grid grid-cols-6 gap-4 inline-flex rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-900 px-4 pt-4 pb-2 mb-2"
          >
            <div
              class="col-start-5 col-span-3 max-lg:col-start-1 max-lg:col-end-7 rounded-lg overflow-hidden"
            >
              <img
                class="h-full w-full rounded-lg transition ease-in-out delay-150 group-hover:scale-110 duration-300"
                src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                alt=""
              />
            </div>
            <div
              class="col-start-1 col-end-5 max-lg:col-start-1 max-lg:col-end-7"
            >
              <div class="card-list-body text-wrap">
                <a href="blog-read.html" class="visited:text-purple-600">
                  <h3
                    class="text-xl dark:text-white font-semibold text-slate-900"
                  >
                    Top amazing web demos and experiments in 2024 should know
                    about
                  </h3>
                </a>
                <p class="card-list-text text-gray-500 dark:text-gray-400">
                  consectetuer adipiscing elit, sed diam nonummy nibh euismod
                  tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
                  wisi enim ad minim veniam,
                </p>
                <div class="flex items-center gap-3">
                  <a href="timeline.html">
                    <img
                      src="assets/images/avatars/avatar-7.jpg"
                      alt=""
                      class="bg-gray-200 rounded-full w-10 h-10"
                    />
                  </a>
                  <div class="flex-1">
                    <a href="timeline.html">
                      <h4
                        class="font-semibold text-sm text-black dark:text-white"
                      >
                        Johnson smith
                      </h4>
                    </a>
                    <div class="mt-0.5">Suggested For You</div>
                  </div>
                  <button
                    type="button"
                    class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery"
                  >
                    Follow
                  </button>
                </div>
                <div class="flex justify-start text-xs mt-2 mb-2">
                  <span>27 weeks ago</span>
                  <span class="xl:block hidden">·</span>
                  <span> 156.9K views</span>
                </div>
                <div>
                  <span
                    class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
                    >Default</span
                  >
                  <span
                    class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300"
                    >Dark</span
                  >
                  <span
                    class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
                    >Red</span
                  >
                  <span
                    class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300"
                    >Green</span
                  >
                  <span
                    class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300"
                    >Yellow</span
                  >
                  <span
                    class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300"
                    >Indigo</span
                  >
                  <span
                    class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300"
                    >Purple</span
                  >
                  <span
                    class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-pink-900 dark:text-pink-300"
                    >Pink</span
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
          id="styled-settings"
          role="tabpanel"
          aria-labelledby="settings-tab"
        >
        </div>
      </div>
      <!-- tab主内容结束 -->
    </div>
<style>
  .hot-category-box {
    position: fixed;
    width: 100vw;
    top: 60px;
    left: 0;
    z-index: 40;
  }
  #hot-category-content > div {
    min-height: 100vh;
  }

  /* 定义滚动条样式 */
  #hot-category-box > div::-webkit-scrollbar {
    display: none;
  }
</style>

<script>
  class IndexLeft extends HTMLElement {
    constructor() {
      super();
      const listContainer = document.getElementById("index-tab-title-box");
      if (listContainer) {
        //是否拖动
        let isDrag = false;
        //拖动距离
        let initialMousePos = 0;
        //距离
        let initialContentOffset = 0;
        let maxLeft =
          listContainer.scrollWidth > 768 ? 768 - listContainer.scrollWidth : 0;

        const heardStart = (e) => {
          if (e.button !== 0) return; // 只处理左键点击
          isDrag = true;
          initialMousePos = e.clientX;
          initialContentOffset = Number(
            listContainer.style.left.replace("px", "")
          );
        };

        const heardMove = (e) => {
          //没有按下
          if (!isDrag) return;
          //小于可滑动区域
          else if (maxLeft == 0) {
            return;
          } else {
            //获取移动的距离
            const delta = e.clientX - initialMousePos;
            const left = initialContentOffset + delta;
            //到达最左边
            if (left > 0) {
              listContainer.style.left = "0px";
            } else {
              //中间
              if (left > maxLeft) {
                listContainer.style.left = left + "px";
              }
              //到达最右边
              else {
                listContainer.style.left = maxLeft + "px";
              }
            }
          }
        };

        const heardStop = () => {
          isDrag = false;
        };

        listContainer.addEventListener("mousemove", heardMove); //当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
        //listContainer.addEventListener('touchmove', heardMove) //当用户在屏幕上移动手指时会发生 touchmove 事件

        listContainer.addEventListener("mousedown", heardStart); //当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件
        //listContainer.addEventListener('touchstart', heardStart) //当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发

        listContainer.addEventListener("mouseup", heardStop); //当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件
        //listContainer.addEventListener('mouseleave', heardStop) //当鼠标指针离开被选元素时，会发生 mouseleave 事件
        listContainer.addEventListener("touchend", heardStop); //当手指从屏幕上离开的时候触发
      }

      // 点击标题返回顶部按钮监听器
      listContainer?.addEventListener("click", function () {
        // 使用平滑滚动（如果浏览器支持）或直接跳转到顶部
        if (window.scrollY > 700) {
          window.scrollTo({
            top: 0,
            behavior: "smooth",
          });
        }
      });

    }
  }
</script>

<script>
  const mockPageItems = document.querySelectorAll(".mock-page-1");
  if (mockPageItems) {
    mockPageItems.forEach((item) => {
      item.classList.remove("hidden");
    });
  }

  function pageBoxShow(pageId, pageClass) {
    const pageBox = document.getElementById(pageId);
    const mockPageItems = pageBox?.querySelectorAll(".mock-page");
    if (mockPageItems) {
      mockPageItems.forEach((item) => {
        if (!item.classList.contains("hidden")) {
        item.classList.add("hidden");
        }
      });
    }
    const showPageItems = pageBox?.getElementsByClassName(pageClass);
    if (showPageItems) {
      [...showPageItems].forEach((item) => {
        if (item.classList.contains("hidden")) {
          item.classList.remove("hidden");
        }
      });
    }
  }

  function pageHide(pageId) {
    const pageBox = document.getElementById(pageId);
    const mockPages = pageBox?.querySelectorAll(".mock-page-a");
    if (mockPages) {
      mockPages.forEach((item) => {
        item.classList.remove("rounded-lg");
      });
    }
  }

  const mockPageAs = document.querySelectorAll(".mock-page-a");
  if (mockPageAs) {
    mockPageAs.forEach((item) => {
      item.addEventListener("click", function (e) {
        e.preventDefault();
        const text = item.innerHTML;
        const pageId = item.dataset.pageBox;
        pageBoxShow(pageId,'mock-page-'+text);
        pageHide(pageId);
        item.classList.add("rounded-lg");
      });
    });
  }
</script>
